<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ include file="/pages/jsp/internal/include.jsp" %>

<div class="inner_cont" > 

	<h2><fmt:message key="label.imageRelatedList"/></h2>
	
	<span class="note">
		<fmt:message key="page.relateImage.description"/>
		<!-- <br><br>contentId :      <c:out value="${model.contentId}"/> 
		<br>massimo numero immagini caricabile per il contenuto: <c:out value="${model.maxNumberImg}"/><br> -->
		
		<c:forEach items="${model.messages}" var="message">
			<div id="message"><fmt:message key="${message}"/></div>
		</c:forEach>
		
		<c:forEach items="${model.errors}" var="error">
			<div id="error">
				<fmt:message key="${error.key}">
					<fmt:param value="${error.param1}"/>
				</fmt:message>
			</div>
		</c:forEach>
	</span>
	
	<!-- IMMAGINI DA ASSOCIARE -->
	<c:if test="${fn:length(model.relatedFiles) < model.maxNumberImg}">
		<c:if test="${not empty model.files}">
			<form  id="manageImageForm" method="post" class="form">
				<input type="hidden" name="contentId" value="<c:out value="${model.contentId}"/>"/>
				<input type="hidden" name="maxNumberImg" value="<c:out value="${model.maxNumberImg}"/>"/>
				<table id="tableRelateImage" class="tableDati col tablesorter">
					<thead>
						<tr>
							<th>&nbsp;</th>
					   		<th>Name</th>
					   		<th>Description</th>
							<th>Type</th>
					   	</tr>
			 		</thead>
			 		<tfoot>
						<tr>
							<th>&nbsp;</th>
					   		<th>Name</th>
					   		<th>Description</th>
							<th>Type</th>
					   	</tr>
			 		</tfoot>
			 		<tbody>
						<c:forEach items="${model.files}" var="file" varStatus="i">
							<tr>
								<td><input type="checkbox" name="fileId" value="<c:out value="${file.file.id}"/>"></td>
						   		<td><c:out value="${file.file.name}"/></td>
								<td><c:out value="${file.file.description}"/></td>
								<td><c:out value="${file.file.type}"/></td>
						   	</tr>
						 </c:forEach>
					 </tbody>
				</table>
				<br/>
				<div  id="pagerImage" style="position:relative;top:0px">
					<form>
						<img src="<c:url value="/js/table/first.png"/>" class="first"/>
						<img src="<c:url value="/js/table/prev.png"/>" class="prev"/>
						<input type="text" class="pagedisplay"/>
						<img src="<c:url value="/js/table/next.png"/>" class="next"/>
						<img src="<c:url value="/js/table/last.png"/>" class="last"/>
						<select class="pagesize">
							<option selected="selected" value="5">5</option>
							<option  value="10">10</option>
							<option value="20">20</option>
							<option value="30">30</option>
							<option value="40">40</option>
						</select>
					</form> 
				</div>
				<br/>
				<div class="action_bar">
					<input type="button" class="puls" value="Associa" onclick="sendFormForAction('<c:url value="/content/manageRelationImage.htm"/>','manageImageForm','hasImgDiv','createRelation');"/>
				</div>
			</form>
		</c:if>
	</c:if>
</div>
	
<div class="inner_cont" > 		
	
	<!-- IMMAGINI GIA' ASSOCIATE -->
	<c:if test="${not empty model.relatedFiles}">
	
		<h2><fmt:message key="label.imageRelatedToContent"/></h2>
		
		<form  id="manageImageRelatedForm" class="form" method="post">
			<input type="hidden" name="contentId" value="<c:out value="${model.contentId}"/>"/>
			<input type="hidden" name="maxNumberImg" value="<c:out value="${model.maxNumberImg}"/>"/>
			<table id="tableRelatedImage" class="tableDati col tablesorter">
				<thead>
					<tr>
						<th>&nbsp;</th>
				   		<th>Name</th>
				   		<th>description</th>
						<th>type</th>
						<th>posizione</th>
				   	</tr>
		 		</thead>
		 		<tfoot>
					<tr>
						<th>&nbsp;</th>
				   		<th>Name</th>
				   		<th>description</th>
						<th>type</th>
						<th>posizione</th>
				   	</tr>
		 		</tfoot>
		 		<tbody>
					<c:forEach items="${model.relatedFiles}" var="relatedFile" varStatus="i">
						<tr>
							<td><input type="checkbox" name="fileId" id="checkFile<c:out value="${relatedFile.file.id}"/>" value="<c:out value="${relatedFile.file.id}"/>"></td>
					   		<td><c:out value="${relatedFile.file.name}"/></td>
							<td><c:out value="${relatedFile.file.description}"/></td>
							<td><c:out value="${relatedFile.file.type}"/></td>
							<td>
							
								<input type="text" name="order<c:out value="${relatedFile.file.id}"/>" value="<c:out value="${relatedFile.relContImg.position}"/>" size="3" onclick="javascript:selectCheckBoxRelated('checkFile<c:out value="${relatedFile.file.id}"/>');"/>
								<input type="button" value="Imposta Ordine" onclick="sendFormForAction('<c:url value="/content/manageRelationImage.htm"/>','manageImageRelatedForm','hasImgDiv','updateOrder');"/>
							</td>
					   	</tr>
					</c:forEach>
				</tbody>
			</table>
			<br/>
			<div  id="pagerImageRelated" style="position:relative;top:0px">
				<form>
					<img src="<c:url value="/js/table/first.png"/>" class="first"/>
					<img src="<c:url value="/js/table/prev.png"/>" class="prev"/>
					<input type="text" class="pagedisplay"/>
					<img src="<c:url value="/js/table/next.png"/>" class="next"/>
					<img src="<c:url value="/js/table/last.png"/>" class="last"/>
					<select class="pagesize">
						<option selected="selected" value="5">5</option>
						<option  value="10">10</option>
						<option value="20">20</option>
						<option value="30">30</option>
						<option value="40">40</option>
					</select>
				</form> 
			</div>
			<br>
			<div class="action_bar">
				<input type="button" class="puls" value="Elimina Associazione" onclick="sendFormForAction('<c:url value="/content/manageRelationImage.htm"/>','manageImageRelatedForm','hasImgDiv','deleteRelation');"/>
			</div>
		</form>
	</c:if>
	
</div>

<script type="text/javascript" src="<c:url value="/js/table/jquery.tablesorter.js"/>"></script>
<script>
$(document).ready(function() { 
	$("#tableRelateImage").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pagerImage"),size:'5'}); 
	$("#tableRelatedImage").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pagerImageRelated"),size:'5'}); 
});

</script>
